<!--
 * @Date: 2025-04-10 00:12:10
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-13 01:23:44
 * @FilePath: /admin/vue/src/components/ex-table.vue
-->
<script setup lang="ts">
import type {
  DataTableBaseColumn,
  DataTableColumns,
  DataTableFilterState,
  DataTableSortState,
} from 'naive-ui'

const { load, params } = defineProps<{
  collection: ResponsePageResult<any> | undefined
  load: Function
  params: Record<any, any>
  columns: DataTableColumns<any>
}>()

const handleSorterChange = (options: DataTableSortState | DataTableSortState[] | null) => {
  console.log('handleSorterChange', options)

  load()
}
const handleFiltersChange = (
  filters: DataTableFilterState,
  initiatorColumn: DataTableBaseColumn,
) => {
  Object.entries(filters).map(([k, v]) => (params[k] = JSON.stringify(v)))
  load()
}
const handlePageChange = (qty: number) => {
  params.page = qty
  load()
}
const handlePageSizeChange = (qty: number) => {
  params.page = 1
  params.per_page = qty
  load()
}

load()
</script>

<template>
  <n-data-table
    remote
    flex-height
    min-height="calc(100vh - 260px)"
    :columns="columns"
    :data="collection?.data"
    :row-key="(rowData) => rowData.id"
    :pagination="{
      page: collection?.meta.current_page,
      pageSize: collection?.meta.per_page,
      pageCount: collection?.meta.last_page,
      itemCount: collection?.meta.total,
      showSizePicker: true,
      pageSizes: [5, 10, 15, 30, 50],
    }"
    @update:filters="handleFiltersChange"
    @update:page="handlePageChange"
    @update:page-size="handlePageSizeChange"
    @update:sorter="handleSorterChange"
  />
</template>

<style lang="scss"></style>
